<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        body,html{ width: 100%;height: 100%; overflow: hidden;background: #22B573 }
        #canvas{
            width: 380px;
            height: 380px;
            border-radius: 380px;
            transform: rotateZ(180deg);
            /* background:linear-gradient(180deg,rgba(255,255,255,0.75),rgba(255,255,255,0)); */
        }
    </style>
</head>
<body>

    <canvas id="canvas"></canvas>
    <script type="text/javascript" src="js/simplex.min.js"></script>
    <script type="text/javascript">
        class Wave{
            constructor(){
                this.canvas = document.getElementById('canvas');
                this.ctx = this.canvas.getContext('2d');
                this.simplex = new SimplexNoise();
                this.speedY = 0;
                this.speedX = 0;
                this.init();
            }
            init(){
                this.reset();
                this.loop();
            }
            reset(){
                this.w = 380;
                this.h = 380;
                this.canvas.width = this.w;
                this.canvas.height = this.h;
                this.count = Math.ceil(this.w / Math.floor(Math.random()*40 + 10));
            }   
            loop(){
                var This = this;
                
                function drawloop(){
                    window.requestAnimationFrame(drawloop);
                    This.ctx.clearRect(0,0,This.w,This.h);
                    This.speedX = 10000;
                    This.speedY += 0.02; //每次渲染需要更新波峰波谷值
                    //连续绘制三次波浪线
                    // This.draw('rgba(255,255,255,.3)','screen'); 
                    // // This.draw('rgba(255,255,255,.3)','screen'); 
                    // This.draws('rgba(255,255,255,.3)','screen'); 
                    This.draw('rgba(255,255,255,.3)','screen'); 
                    // This.draw('rgba(255,255,255,.3)','screen'); 
                    This.draws('rgba(255,255,255,0.3)','screen'); 
                }
                drawloop();
            }
            draw(color,comp){
                var amp = 35; //波浪幅度 可以通过函数传递参数更改不同的幅度
                this.ctx.beginPath();
                for(var i=0;i<=this.count;i++){
                    this.speedX += 0.055;
                    var x = i*(this.w/this.count);
                    var y = this.h/2 + this.simplex.noise2D(this.speedX,this.speedY)*amp;
                    this.ctx[i === 0 ? 'moveTo' : 'lineTo'](x,y);
                }
                this.ctx.lineTo(this.w,-this.h); 
                this.ctx.lineTo(0, -this.h); 
                this.ctx.closePath();
                var grad=this.ctx.createLinearGradient(0,0,0,this.h);
                grad.addColorStop(0,"rgba(255,255,255,.3)"); 
                grad.addColorStop(1,"rgba(255,255,255,.1)");
                this.ctx.fillStyle = grad; 
                this.ctx.globalCompositeOperation = comp;
                this.ctx.fill();    
            }
            draws(color,comp){
                var amp = 35; //波浪幅度 可以通过函数传递参数更改不同的幅度
                this.ctx.beginPath();
                for(var i=0;i<=this.count;i++){
                    this.speedX += 0.05;
                    var x = i*(this.w/this.count);
                    var y = this.h/2 + this.simplex.noise2D(this.speedX,this.speedY)*amp;
                    this.ctx[i === 0 ? 'moveTo' : 'lineTo'](x,y);
                }
                this.ctx.lineTo(this.w,-this.h); 
                this.ctx.lineTo(0, -this.h); 
                this.ctx.closePath();
                var grad=this.ctx.createLinearGradient(0,0,0,this.h);
                grad.addColorStop(0,"rgba(255,255,255,.3)"); 
                grad.addColorStop(1,"rgba(255,255,255,.1)");
                this.ctx.fillStyle = grad; 
                this.ctx.globalCompositeOperation = comp;
                this.ctx.fill();    
            }
        }
        new Wave();
    </script>
</body>
</html>